<template>
  <div class="middleware">
    <div class="searchDiv">
      <Button type="success" @click="add">新增字典</Button>
    </div>
    <Table border :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page show-total :total="total" :current="pageNo" :page-size="pageSize" style="margin:20px auto;text-align:center" @on-change="changePage" show-elevator />
    <!-- 新增、编辑角色弹窗开始 -->
    <Modal :mask-closable="false" v-model="modal1" :title="title1">
      <Form :model="formItem" :label-width="80">
        <FormItem label="展示名">
          <Input v-model="formItem.displayName" placeholder="请输入" />
        </FormItem>
        <FormItem label="大类枚举值">
          <Input v-model="formItem.enumValue" placeholder="请输入" />
        </FormItem>
        <FormItem label="排序值">
          <Input v-model="formItem.sort" placeholder="请输入" />
        </FormItem>
        <FormItem label="小类数值">
          <Input v-model="formItem.value" placeholder="请输入" />
        </FormItem>
        <FormItem label="备注">
          <Input v-model="formItem.memo" placeholder="请输入" />
        </FormItem>
      </Form>
      <div slot="footer">
               <Button @click="modal1=false">取消</Button>
              <Button type="primary" :loading="btnClick" @click="ok">确定</Button>
          </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modal3" width="360" class-name="vertical-center-modal" @on-ok="remove(delID)">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>确认删除</span>
        </p>
        <div style="text-align:center">
            <p>确认删除此数据么？</p>
        </div>
    </Modal>
    <!-- 新增、编辑角色弹窗结束 -->

  </div>
</template>

<script>
import {
  getTableData,
  add,
  update,
  del
} from '@/api/dict'

export default {
  data () {
    return {
      btnClick:false,
      loading:true,
      delID: 0,
      modal3: false,
      typeList: [{ id: 1, name: '在线' }, { id: 2, name: '不在线' }],
      linkTypeList: [{ id: 1, name: '新连接' }, { id: 2, name: '旧连接' }],
      pageNo: 1,
      pageSize: 10,
      total: 0,

      modal1: false,
      title1: '新增中间件',
      msg1: '新增成功',
      isAdd: true,
      formItem: {
        displayName:'',
        enumValue:'',
        sort:'',
        value:'',
        memo:''
      },
      columns: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'center'
        },
        {
          title: '展示名',
          key: 'displayName'
        },
        {
          title: '大类枚举值',
          key: 'enumValue'
        },
        {
          title: '小类数值',
          key: 'value'
        },
        {
          title: '排序',
          key: 'sort'
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '备注',
          key: 'memo'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.openDel(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: []
      /* tableData: [
        {
          ip: '10.0.0.36',
          duankou: '17001',
          type: '在线',
          linkType: '新连接',
          state: '正常'
        },
        {
          ip: '10.0.0.36',
          duankou: '17001',
          type: '在线',
          linkType: '新连接',
          state: '正常'
        }
      ] */
    }
  },
  methods: {
    openDel (id) {
      this.modal3 = true
      this.delID = id
    },
    remove (id) {
      del({ id: id }).then(res => {
        if (res.code == 0) {
          this.$Message.info('删除成功')
          this.pageNo=1;
          this.getDataList()
        } else {
          this.$Message.info(res.message)
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    add () {
      this.formItem = {
         displayName:'',
        enumValue:'',
        sort:'',
        value:'',
        memo:''
      }
      this.title1 = '新增字典'
      this.msg1 = '新增成功'
      this.isAdd = true
      this.modal1 = true
    },
    edit (params) {
      this.title1 = '编辑字典'
      this.msg1 = '修改成功'
      this.isAdd = false
      this.formItem = params.row
      this.modal1 = true
    },
    ok () {
            this.btnClick=true;
      if (this.isAdd) {
        add(this.formItem).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info(this.msg1)
            this.getDataList()
            this.modal1 = false
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      } else {
        update(this.formItem).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info(this.msg1)
            this.getDataList()
            this.modal1 = false
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      }
    },
    /** 分页 */
    changePage (pageNo) {
      this.pageNo = pageNo
      this.getDataList()
    },
    getDataList () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getTableData(params).then(res => {
        console.log('res>' + JSON.stringify(res))
        if (res.code == 0) {
          this.total = res.data.total
          this.tableData = res.data.list
          this.loading=false
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    }
  },
  mounted () {},
  created () {
    this.getDataList()
  }
}
</script>

<style lang="less">
.middleware {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
    margin-bottom: 10px;
    .chaxun {
      margin-right: 15px;
    }
  }
}
.qxDiv {
  .ivu-form-item {
    margin-bottom:5px;
  }
}

</style>
